<template>
  <div>
    <vxe-grid v-bind="gridOptions" height="700" :header-row-style="headerCellClassName1">
      <template #name_edit="{ row }">
        <vxe-input v-model="row.name"></vxe-input>
      </template>
      <template #nickname_edit="{ row }">
        <vxe-input v-model="row.nickname"></vxe-input>
      </template>
      <template #role_edit="{ row }">
        <vxe-input v-model="row.role"></vxe-input>
      </template>
      <template #address_edit="{ row }">
        <vxe-input v-model="row.address"></vxe-input>
      </template>
    </vxe-grid>
  </div>
</template>

<script>
export default {
  data() {
    return {
      gridOptions: {
        border: true,
        resizable: true,
        keepSource: true,
        height: 500,
        printConfig: {},
        importConfig: {},
        exportConfig: {},
        pagerConfig: {
          perfect: true,
          pageSize: 10,
        },
        editConfig: {
          trigger: "click",
          mode: "row",
          showStatus: true,
        },
        toolbarConfig: {
          buttons: [
            {
              code: "insert_actived",
              name: "新增",
              status: "primary",
              icon: "vxe-icon--plus",
            },
            {
              code: "mark_cancel",
              name: "标记/取消",
              status: "danger",
              icon: "el-icon-delete",
            },
            {
              code: "save",
              name: "保存",
              status: "primary",
              icon: "el-icon-document-checked",
            },
          ],
          perfect: true,
          refresh: {
            icon: "vxe-icon--refresh",
            iconLoading: "vxe-icon--refresh roll",
          },
          import: {
            icon: "vxe-icon--upload",
          },
          export: {
            icon: "vxe-icon--download",
          },
          print: {
            icon: "el-icon-printer",
          },
          zoom: {
            iconIn: "vxe-icon--zoomin",
            iconOut: "vxe-icon--zoomout",
          },
          custom: {
            icon: "el-icon-s-tools",
          },
        },
        proxyConfig: {
          props: {
            result: "result",
            total: "page.total",
          },
          ajax: {
            // 接收 Promise
            query: ({ page }) => {
              return new Promise((resolve) => {
                setTimeout(() => {
                  const list = [
                    {
                      id: 10001,
                      name: "Test1",
                      nickname: "T1",
                      role: "Develop",
                      sex: "Man",
                      age: 28,
                      address: "Shenzhen",
                    },
                    {
                      id: 10002,
                      name: "Test2",
                      nickname: "T2",
                      role: "Test",
                      sex: "Women",
                      age: 22,
                      address: "Guangzhou",
                    },
                    {
                      id: 10003,
                      name: "Test3",
                      nickname: "T3",
                      role: "PM",
                      sex: "Man",
                      age: 32,
                      address: "Shanghai",
                    },
                    {
                      id: 10004,
                      name: "Test4",
                      nickname: "T4",
                      role: "Designer",
                      sex: "Women",
                      age: 23,
                      address: "Shenzhen",
                    },
                    {
                      id: 10005,
                      name: "Test5",
                      nickname: "T5",
                      role: "Develop",
                      sex: "Women",
                      age: 30,
                      address: "Shanghai",
                    },
                    {
                      id: 10006,
                      name: "Test6",
                      nickname: "T6",
                      role: "Designer",
                      sex: "Women",
                      age: 21,
                      address: "Shenzhen",
                    },
                    {
                      id: 10007,
                      name: "Test7",
                      nickname: "T7",
                      role: "Test",
                      sex: "Man",
                      age: 29,
                      address: "test abc",
                    },
                    {
                      id: 10008,
                      name: "Test8",
                      nickname: "T8",
                      role: "Develop",
                      sex: "Man",
                      age: 35,
                      address: "Shenzhen",
                    },
                    {
                      id: 10009,
                      name: "Test9",
                      nickname: "T9",
                      role: "Develop",
                      sex: "Man",
                      age: 35,
                      address: "Shenzhen",
                    },
                    {
                      id: 100010,
                      name: "Test10",
                      nickname: "T10",
                      role: "Develop",
                      sex: "Man",
                      age: 35,
                      address: "Guangzhou",
                    },
                    {
                      id: 100011,
                      name: "Test11",
                      nickname: "T11",
                      role: "Test",
                      sex: "Women",
                      age: 26,
                      address: "test abc",
                    },
                    {
                      id: 100012,
                      name: "Test12",
                      nickname: "T12",
                      role: "Develop",
                      sex: "Man",
                      age: 34,
                      address: "Guangzhou",
                    },
                    {
                      id: 100013,
                      name: "Test13",
                      nickname: "T13",
                      role: "Test",
                      sex: "Women",
                      age: 22,
                      address: "Shenzhen",
                    },
                  ];
                  resolve({
                    page: {
                      total: list.length,
                    },
                    result: list.slice(
                      (page.currentPage - 1) * page.pageSize,
                      page.currentPage * page.pageSize
                    ),
                  });
                }, 100);
              });
            },
            // body 对象： { removeRecords }
            delete: () => {
              return new Promise((resolve) => {
                setTimeout(() => {
                  resolve({});
                }, 100);
              });
            },
            // body 对象： { insertRecords, updateRecords, removeRecords, pendingRecords }
            save: () => {
              return new Promise((resolve) => {
                setTimeout(() => {
                  resolve({});
                }, 100);
              });
            },
          },
        },
        columns: [
          { type: "checkbox", width: 50 },
          { type: "seq", width: 60 },
          {
            field: "name",
            title: "姓名",
            // editRender: { autofocus: ".vxe-input--inner" },
            slots: { edit: "name_edit" },
          },
          {
            field: "nickname",
            title: "Nickname",
            // editRender: {},
            slots: { edit: "nickname_edit" },
          },
          {
            field: "role",
            title: "Role",
            // editRender: {},
            slots: { edit: "role_edit" },
          },
          {
            field: "address",
            title: "Address",
            showOverflow: true,
            editRender: {},
            slots: { edit: "address_edit" },
          },
        ],
      },
      testDAlist:[]
    };
  },
  created(){
    this.test()
  },
  methods: {
      // 为表头的样式添加class
      headerCellClassName1() {
          return "height: 50px;"
      },
  }
};
</script>

<style scoped>
.my-danger {
  color: #f56c6c;
}
</style>